<script lang="ts" setup>
import type { IAllPatientDataArr } from '../../service/modules/user/type'
interface IProps {
  patientsAll: IAllPatientDataArr
  curIndex?: 0
  isDelete?: false
}
const props = defineProps<IProps>()
const $emit = defineEmits(['selectedPatient'])
const selectedPatient = (item, index) => {
  $emit('selectedPatient', item, index)
}
const editPatientHandle = () => {
  console.log('editPatientHandle')
}
const deletePatientHandle = () => {
  console.log('deletePatientHandle')
}
</script>
<template>
  <el-card
    class="patient-card"
    :class="{ selected: index === curIndex }"
    v-for="(item, index) in props.patientsAll"
    :key="item.id"
    @click="selectedPatient(item, index)"
  >
    <div class="card-body">
      <div class="patient-item">
        <div class="content">
          <div class="pat-top">
            <div class="patient-name">
              {{ item.name }}
            </div>
            <div class="pat-btns">
              <el-icon class="edit" @click="editPatientHandle"
                ><Edit
              /></el-icon>
              <template v-if="isDelete">
                <el-icon class="delete" @click="deletePatientHandle"
                  ><Delete
                /></el-icon>
              </template>
            </div>
          </div>

          <div class="patient-info">
            <div class="pcard-cate">
              证件类型:{{ item.param?.certificatesTypeString }}
            </div>
            <div class="pcard-cate">证件号码:{{ item.certificatesNo }}</div>
            <div class="pcard-cate">
              用户性别:{{ item.sex === 1 ? '男' : '女' }}
            </div>
            <div class="pcard-cate">出生日期:{{ item.birthdate }}</div>
            <div class="pcard-cate">手机号码:{{ item.phone }}</div>
            <div class="pcard-cate">
              婚姻状况:{{ item.isMarry === 1 ? '已婚' : '未婚' }}
            </div>
            <div class="pcard-cate">当前住址:{{ item.param?.cityString }}</div>
            <div class="pcard-cate">详细地址:{{ item.param?.fullAddress }}</div>
          </div>
        </div>
        <div class="selected-icn">
          <el-icon><CircleCheckFilled /></el-icon>
        </div>
      </div>
    </div>
  </el-card>
  <!-- 添加就诊人 -->
  <el-card class="patient-card">
    <div class="card-body">
      <div class="patient-item">
        <div class="add-patient">
          <el-icon><Plus /></el-icon>
          <span>添加就诊人</span>
        </div>
      </div>
    </div>
  </el-card>
</template>
<style lang="less" scoped>
.patient-card {
  width: calc((100% - 60px) / 3);
  margin-bottom: 20px;
  margin-right: 20px;
  border: 0;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
  &:nth-child(3n) {
    margin-right: 0;
  }
  &:hover {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);

    .patient-item {
      font-weight: 900;
    }
  }
  &.selected {
    background-color: #4990f1;
    color: #fff;
    .card-body {
      .patient-item {
        .pat-top {
          color: #fff;
          font-weight: 900;

          .patient-name {
          }
          .pat-btns {
          }
        }

        .patient-info {
          color: #fff;
          font-weight: 900;
        }
        .selected-icn {
          opacity: 1;
        }
      }
    }
  }

  :deep(.el-card__body) {
    padding: 0;
    height: 100%;
  }
  .card-body {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    .patient-item {
      padding: 15px 10px;
      cursor: pointer;
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;
      .content {
        display: flex;
        flex-direction: column;
        width: 100%;
      }
      .selected-icn {
        opacity: 0;
        font-size: 30px;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateX(-50%);
      }
      .pat-top {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        font-size: 15px;
        color: #333;
        justify-content: space-between;

        .patient-name {
          letter-spacing: 1px;
        }
        .pat-btns {
          margin-left: 10px;
          display: flex;
          align-items: center;
          .el-icon {
            width: 28px;
            height: 28px;
            margin: 0 5px;
            border-radius: 50%;
            &:hover {
              opacity: 0.9;
            }
            &.edit {
              background-color: #4990f1;
              color: #fff;
            }
            &.delete {
              background-color: #f56c6c;
              color: #fff;
            }
          }
        }
      }

      .patient-info {
        font-size: 13px;
        color: #343434;
        line-height: 20px;
        .pcard-cate {
          color: inherit;
          padding: 3px 0;
        }
      }
      .add-patient {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        color: #4990f1;
        font-size: 16px;

        span {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
